<script setup lang="ts">
  import { inject, computed, hasInjectionContext } from "vue";

  defineOptions({
    name: "umi-radio",
  });

  interface RadioProps {
    value?: string | number;
    name?: string;
    checked?: boolean;
  }

  const props = withDefaults(defineProps<RadioProps>(), {
    value: "",
    name: "",
  });

  let defaultValue = "";
  let themeValue = "";
  let groupName = "";

  if (hasInjectionContext()) {
    defaultValue = inject("defaultValue", "");
    themeValue = inject("themeValue", "");
    groupName = inject("groupName", "");
  }

  const checked = computed(() => {
    if (defaultValue === props.value) {
      return true;
    }
    return props.checked;
  });

  const classNames = computed(() => {
    return {
      [`umi-radio`]: true,
      [`umi-radio-${themeValue}`]: themeValue,
      "umi-radio-checked": checked.value,
    };
  });
</script>

<template>
  <div :class="classNames">
    <label class="umi-radio-label">
      <input type="radio" :name="groupName" :checked="checked" />
      <div><slot></slot></div>
    </label>
  </div>
</template>

<style lang="scss" scoped>
  .umi-radio {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 32px;
    cursor: pointer;
    border-bottom: 1px solid #efefef;
    padding: 6px 10px;
    box-sizing: border-box;

    &-label {
      display: flex;
      align-items: center;
      gap: 6px;
    }
  }
</style>
